
<template>
  <div>
    <div class="text-center mb-8">
      <h1 class="text-4xl font-bold text-gray-900 mb-4">
        日常技术练习平台
      </h1>
      <p class="text-xl text-gray-600">
        选择模块开始练习，提升你的技术能力
      </p>
    </div>

    <div v-if="loading" class="flex justify-center items-center h-64">
      <div class="animate-spin rounded-full h-12 w-12 border-b-2 border-primary"></div>
    </div>

    <div v-else class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
      <div 
        v-for="module in modules" 
        :key="module.id" 
        class="bg-white rounded-lg shadow-md p-6 hover:shadow-lg transition-shadow"
      >
        <div class="flex items-center mb-4">
          <div class="w-12 h-12 bg-primary rounded-lg flex items-center justify-center">
            <i :class="`fas ${module.icon} text-white text-xl`"></i>
          </div>
          <h3 class="text-xl font-semibold ml-4">{{ module.name }}</h3>
        </div>
        
        <p class="text-gray-600 mb-4">{{ module.description }}</p>
        
        <div class="flex justify-between items-center">
          <span class="text-sm text-gray-500">
            难度: {{ module.difficulty }}
          </span>
          <router-link
            :to="`/module/${module.id}`"
            class="bg-primary text-white px-4 py-2 rounded-md hover:bg-primary/90 transition-colors"
          >
            开始练习
          </router-link>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { ref, onMounted } from 'vue'
import axios from 'axios'

export default {
  name: 'Home',
  setup() {
    const modules = ref([])
    const loading = ref(true)

    const fetchModules = async () => {
      try {
        const response = await axios.get('/api/modules')
        modules.value = response.data
      } catch (error) {
        console.error('获取模块失败:', error)
      } finally {
        loading.value = false
      }
    }

    onMounted(() => {
      fetchModules()
    })

    return {
      modules,
      loading
    }
  }
}
</script>
